<template>
	<view class="vip-container">
		<!-- 连点器 -->
		<!-- 		<view class="head">
			<text class="left-title">v</text>
			<text class="title">开通会员</text>
			<text class="right-title">我的订单</text>
		</view> -->
		<view class="head">
			<my-header title='开通会员' rights='我的订单'></my-header>
		</view>

		<!-- vip -->
		<view class="content">
			<view class="cs" :class="{'border-bg1':currentBackground === 'bg1', 'border-bg2':currentBackground === 'bg2'}"
				v-for="(item,index) in vipDataList" :key="index">

				<view class=".cs-left">

					<view>{{item.time}}</view>
					<view class="">
						<text>￥</text>
						<text class=""> {{item.price}} </text>
						<text class="discount">{{item.disc}}</text>
					</view>
				</view>
				<view class=".cs-right">
					<view class="btn"
						:style="{backgroundImage:(currentBackground === 'bg1'? ImageBg.backgroundImage1 : ImageBg.backgroundImage2)}">
						开通</view>
				</view>
				<!-- 				<text>{{item.time}}</text>
				<view class="money">
					<text>￥</text>
					<text class="pricePd"> {{item.price}} </text>
					<text class="discount">{{item.disc}}</text>
				</view>
				<text>开通</text> -->

			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				// 背景图片
				ImageBg: {
					backgroundImage1: 'url(' + require('@/static/style1/zh16.png') + ')',
					backgroundImage2: 'url(' + require('@/static/style2/zh16.png') + ')',
				},
				// 渲染数据
				vipDataList: [{
						time: '1个月',
						'price': '20',
						'disc': '35'
					},
					{
						time: '6个月',
						'price': '100',
						'disc': '210'

					},
					{
						time: '1年',
						'price': '330',
						'disc': '350'
					}
				]


			}
		},
		computed: {
			...mapState('theme', ['currentBackground'])
		}
	}
</script>

<style lang="scss">
	.ccc {
		border: 1px solid red;
		width: 100%;
		height: 500px;
	}

	.vip-container {
		background-color: #11112B;
		color: #fff;
		height: 100vh;
		position: relative;

		.head {
			width: 100%;
			height: 62rpx;
		}

		.content {
			// padding-top: 40rpx;
			margin-top: 40rpx;
			// border: 1px solid red;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			.cs {
				// border: 1px solid red;
				margin-top: 66rpx;
				width: 618rpx;
				height: 176rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.cs-left {
					// border: 1px solid seagreen;
					width: 100%;
					height: 100%;
					flex: 2;
					display: flex;
					align-items: center;
					justify-content: space-around;

					.discount {
						font-size: 20rpx;
						margin-left: 7rpx;
						text-decoration: line-through
					}
				}

				.cs-right {
					width: 100%;
					height: 100%;
					// border: 1px solid aqua;
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;

					.btn {
						height: 60rpx;
						width: 130rpx;
						// background: url('@/static/style1/zh16.png');
						background-repeat: no-repeat;
						background-position: center center;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
			}
		}

	}
</style>